<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { reactive, onMounted } from 'vue'
import { map } from '../../request/index'

let mapArr = reactive([{
  name: '中国',
  adcode: 100000
}])

onMounted(() => {
  fun(100000, '中国')

})
let fun = (adcode, name) => {
  map(adcode).then(res => {
    console.log(res)
    var myChart = echarts.init(document.getElementById('main'));
    echarts.registerMap(name, res.data);
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c} (p / km2)'
      },
      visualMap: {
        min: 8,
        max: 50,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
          color: ['lightskyblue', 'yellow', 'orangered']
        }
      },
      series: [
        {
          name: name,
          type: 'map',
          map: name,
          label: {
            show: true
          },
          data: res.data.features.map((item) => {
            return {
              name: item.properties.name,
              value: item.properties.childrenNum,
              adcode: item.properties.adcode
            }
          })
          // data: [
          //   { name: '中西区', value: 20057.34 },
          //   { name: '湾仔', value: 15477.48 },
          //   { name: '东区', value: 31686.1 },
          //   { name: '南区', value: 6992.6 },
          //   { name: '油尖旺', value: 44045.49 },
          //   { name: '深水埗', value: 40689.64 },
          //   { name: '九龙城', value: 37659.78 },
          //   { name: '黄大仙', value: 45180.97 },
          //   { name: '观塘', value: 55204.26 },
          //   { name: '葵青', value: 21900.9 },
          //   { name: '荃湾', value: 4918.26 },
          //   { name: '屯门', value: 5881.84 },
          //   { name: '元朗', value: 4178.01 },
          //   { name: '北区', value: 2227.92 },
          //   { name: '大埔', value: 2180.98 },
          //   { name: '沙田', value: 9172.94 },
          //   { name: '西贡', value: 3368 },
          //   { name: '离岛', value: 806.98 }
          // ],
          // 自定义名称映射
          // nameMap: {
          //   'Central and Western': '中西区',
          //   Eastern: '东区',
          //   Islands: '离岛',
          //   'Kowloon City': '九龙城',
          //   'Kwai Tsing': '葵青',
          //   'Kwun Tong': '观塘',
          //   North: '北区',
          //   'Sai Kung': '西贡',
          //   'Sha Tin': '沙田',
          //   'Sham Shui Po': '深水埗',
          //   Southern: '南区',
          //   'Tai Po': '大埔',
          //   'Tsuen Wan': '荃湾',
          //   'Tuen Mun': '屯门',
          //   'Wan Chai': '湾仔',
          //   'Wong Tai Sin': '黄大仙',
          //   'Yau Tsim Mong': '油尖旺',
          //   'Yuen Long': '元朗'
          // }
        }
      ]
    }
    myChart.setOption(option)


    myChart.off('click', onclick)
    myChart.off('contextmenu', oncontextmenu)

    myChart.on('click', function (params) {
      console.log(params)
      fun(params.data.adcode, params.data.name)
      mapArr.push({
        name: params.data.name,
        adcode: params.data.adcode
      })
    })

    myChart.on('contextmenu', function () {
      mapArr.pop()
      let { adcode, name } = mapArr[mapArr.length - 1]
      fun(adcode, name)
    })
  })
}

</script>

<style lang="scss" scoped>
#main {
  width: 500px;
  height: 500px;
  margin: auto
}
</style>